<template>
    <div class="alce"style="margin-top: 112px;">
        <!--分类-->
        <div style="background-color: #fff;
    border-radius: 10px;
    padding: 10px 5px;margin: 10px;">
            <ul style="list-style: none;display: flex;flex-wrap: wrap;">
                <li v-for="v in typs" style="width: 20%;margin-bottom: 5px">
                    <div style="    width: 62px;
    height: 62px;
    border-radius: 0px;
    overflow: visible;background-color: rgb(243, 244, 246);margin: 0 auto;"><img :src="v.image" alt=""
                                                                                 style="width: 100%;"></div>
                    <p style="width: 60px;margin: 5px;overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;    color: #303133;
    font-size: 14px;">{{v.name}}</p>
                </li>
            </ul>
        </div>
        <!--商品-->
        <div style="margin: 5px 10px 0 10px;
    border-radius: 7px 7px 0px 0px;box-sizing: border-box;color: #303133;
    font-size: 14px;display: flex;flex-wrap: wrap;justify-content: space-between;margin-bottom: 70px">
            <div v-for="v in methods" style="width: 48%;
    background: #fff;
    overflow: hidden;
    margin: 5px 0;
    border-radius: 10px;">
                <div>
                    <!--图片部分-->
                    <div style="width: 170px;
    height: 170px;
    border-radius: 5px;
    overflow: hidden;background-color: #f3f4f6;">
                        <img :src="v.small" alt="" style="width: 100%;">
                    </div>
                    <!--文字部分-->
                    <div style="margin: 10px;">
                        <p style="font-weight: 500;
    vertical-align: middle;
    font-size: 15px;height: 40px;overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;box-sizing: border-box;"><span v-if="v.self_operated==1" style="border-radius: 4px;
    color: #fff;
    font-size: 10px;
    width: 30px;
    text-align: center;
    padding: 2px 4px;background: linear-gradient(90deg,#fd5632 0,#ef0d25);margin-right: 5px;color: #fff;
    font-size: 10px;">自营</span>{{v.name}}</p>
                        <p style="margin: 5px 0;    color: rgb(250, 53, 52);
    font-size: 16px;
    font-weight: 600;"><span style="color: rgb(250, 53, 52);
    font-size: 10px;
    font-weight: 600;">￥</span>{{v.price}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import jsp from '../../../Api/Api'

    export default {
        name: "Appliance",
        data() {
            return {
                typs: [],
                methods: []
            }
        },
        created() {
            //小分类数据
            let a = JSON.parse(localStorage.getItem('id'))
            jsp.getToptype().then(data => {
                // console.log(data.data)
                let typ = data.data
                typ.forEach(v => {
                    if (v.category_id == a) {
                        this.typs = v.children
                    }
                })
                // console.log('小分类', this.typs)
            }).catch(error => console.log(error))

            //商品数据
            jsp.getSearchtype(a).then(data => {
                this.methods = data.data.data
                console.log('商品', this.methods)
            }).catch(data => console.log(data))
        },
        methods: {},
    }
</script>

<style scoped>

</style>